<!DOCTYPE html>
<html lang="en">

<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="./lib/bootstrap-4.3.1-dist/css/bootstrap.min.css">
    <link rel="stylesheet" href="./css/style.css">
    <title>CTS</title>
</head>

<body>
    <!-- Navbar -->
    <nav class="navbar navbar-expand-lg navbar-dark bg-primary">
        <a class="navbar-brand" href="./index.html">
            <img src="./img/LOGO.jpg" width="30" height="30" alt="">
        </a>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent"
            aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>

        <div class="collapse navbar-collapse" id="navbarSupportedContent">
            <ul class="navbar-nav mr-auto">
                <li class="nav-item">
                    <a class="nav-link" href="./index.html">Home</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="./services.html">Services</a>
                </li>
                <li class="nav-item  active">
                    <a class="nav-link" href="./product.html">Product</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="./contact.html">Contact</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="./about.html">About</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="./faq.html">FAQ</a>
                </li>
            </ul>
            <form class="form-inline my-2 my-lg-0">
                <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
                <button class="btn btn-outline-light my-2 my-sm-0" type="submit">Search</button>
            </form>
        </div>
    </nav>
    <!-- Navbar End -->

    <div id="topspace"></div>

    <div class="container-fluid">
        <h1 class="text-center">Computer Component</h1>
        <div class="card-group mb-2 justify-content-around">
            <div class="card col-md-3 border-0">
                <img src="./img/cup.jpg" class="card-img-top" alt="...">
                <div class="card-body">
                    <h5 class="card-title">CPU</h5>
                    <p class="card-text">We provide CPUs from Intel and AMD. We do offer a installation service for customers.</p>
                    
                </div>
            </div>
            <div class="card col-md-3 border-0">
                <img src="./img/motherboard.jpg" class="card-img-top" alt="...">
                <div class="card-body">
                    <h5 class="card-title">Mother Board</h5>
                    <p class="card-text">We provide Motherboards from top manufacturers, like MSI, Gigabyte, ASUS.
                    </p>
                    
                </div>
            </div>
            <div class="card col-md-3 border-0">
                <img src="./img/harddisk.jpg" class="card-img-top" alt="...">
                <div class="card-body">
                    <h5 class="card-title">Hard Drive</h5>
                    <p class="card-text">We provide hard drives from top manufacturers, like WD, Seagate, Samsung.</p>
                    
                </div>
            </div>
        </div>

        
        <h1 class="text-center">Software</h1>
        <div class="card-group mb-2 justify-content-around">
                <div class="card col-md-3 border-0">
                    <img src="./img/OS.png" class="card-img-top" alt="...">
                    <div class="card-body">
                        <h5 class="card-title">Operating System</h5>
                        <p class="card-text">We supply Windows 10, Fedora 29, Ubuntu, and so on. Installation is free for you.</p>
                        
                    </div>
                </div>
                <div class="card col-md-3 border-0">
                    <img src="./img/offices.png" class="card-img-top" alt="...">
                    <div class="card-body">
                        <h5 class="card-title">Office Software</h5>
                        <p class="card-text">We supply MS Office, Libre Office and Google Office Suite. We also supply a basic training for free.
                        </p>
                        
                    </div>
                </div>
                <div class="card col-md-3 border-0">
                    <img src="./img/antivirus.png" class="card-img-top" alt="...">
                    <div class="card-body">
                        <h5 class="card-title">AntiVirus Software</h5>
                        <p class="card-text">On top of providing the licensed Antivirus software from top manufacturer 
                            we do offer a help in installing the antivirus and providing the customers with the most 
                            advanced Internet security support, To protect the users from the various attacks from internet.
                        </p>
                        
                    </div>
                </div>
            </div>



        <h1 class="text-center">Training</h1>
        <div class="card-group pb-5 justify-content-around">
                <div class="card col-md-3 border-0">
                    <img src="./img/office.jpg" class="card-img-top" alt="...">
                    <div class="card-body">
                        <h5 class="card-title">Micrsoft Office</h5>
                        <p class="card-text">There is a lot more Microsoft Office than you think!
                            Learn to use master Microsoft Office applications: Word, Excel and PowerPoint.
                            Increase your working skills with the lowest price.
                        </p>
                        
                    </div>
                </div>
                <div class="card col-md-3 border-0">
                    <img src="./img/photoshop.jpg" class="card-img-top" alt="...">
                    <div class="card-body">
                        <h5 class="card-title">Photoshop</h5>
                        <p class="card-text">This course is for people who are brand new to Photoshop or those who have used Photoshop
                            and looking to hone their skills in the tool.
                            This full course is best way to learn and use it. Edit photos and design grphics the way you imagine them.
                        </p>
                        
                    </div>
                </div>
                <div class="card col-md-3 border-0">
                    <img src="./img/python.jpg" class="card-img-top" alt="...">
                    <div class="card-body">
                        <h5 class="card-title">Python</h5>
                        <p class="card-text">Learning the fundamental of Python, plus how to develop and write code easily in Python. Course covers
                                key steps: Data Importing, Data Cleaning, Data Analyzing, Data Visualization.</p>
                        
                    </div>
                </div>
            </div>

    </div>



    <footer>
            <div class="d-flex  bg-info justify-content-around align-items-center" style="height: 150px;">
                
                <div class="col-md-3">
                    <h4>CTS</h4>
                    <p>Email: abc@CTS.com</p>
                    <p>Tel: 12345678</p>
                </div>
                
                <div class="col-md-3">
                    <p>Follow US</p>
                    <span>
                        <img src="./icon/logo-facebook.svg" alt="facebook" style="height: 40px; width: 40px;">
                        <img src="./icon/logo-twitter.svg" alt="facebook" style="height: 40px; width: 40px;">
                        <img src="./icon/logo-youtube.svg" alt="facebook" style="height: 40px; width: 40px;">
                    </span>
    
                </div>
                
            </div>
            <div class="text-light d-flex align-items-center justify-content-center" style="background-color: black; height: 60px;">
                <p>Copyright &copy; CTS 2019. 133 Tay St, Invercargill, 9810</p>
            </div>
    
        </footer>
    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="./lib/jQuery/jquery-3.4.1.min.js"></script>
    <script src="./lib/bootstrap-4.3.1-dist/js/bootstrap.bundle.js"></script>

</body>

</html>